<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
       .chart-container {
           width: 100%;
           height: {{ chart_height|default("400px") }};
           background: #f9f9f9;
       }
       #main {
           width: 100%;
           height: 100%;
           margin: 10px auto;
       }
       .bar-label {
           font-size: 14px;
           color: #666;
       }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
  </head>
  <body>
    <div class="chart-container">
      <div id="main"></div>
    </div>

    <script type="text/javascript">
      // 动态数据绑定
      const scoreData = [
          {% for entry in sorted_scoreboard_data %}
          {
              name: '{{ entry.playername }}',
              value: {{ entry.data }},
              itemStyle: {
                  color: 'skyblue'
              }
          }{% if not loop.last %},{% endif %}
          {% endfor %}
      ];

      // ECharts配置
      const option = {
          title: {
              text: 'qwq Parkour S8 Ranks Chart',
              left: 'center',
              textStyle: {
                  fontSize: 18,
                  fontWeight: 'bold'
              }
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          xAxis: {
              type: 'value',
              name: 'Score (second)',
              axisLabel: {
                  fontSize: 12
              }
          },
          yAxis: {
              type: 'category',
              data: scoreData.map(item => item.name),
              axisLabel: {
                  fontSize: 14,
                  margin: 10
              },
              inverse: true
          },
          series: [{
              type: 'bar',
              data: scoreData,
              barWidth: '60%',
              label: {
                  show: true,
                  position: 'right',
                  formatter: '{c} s',
                  color: '#333',
                  fontSize: 14,
                  fontWeight: 'bold'
              },
              itemStyle: {
                  borderRadius: [0, 5, 5, 0]
              }
          }],
          grid: {
              containLabel: true,
              left: '0%',
              right: '9%',
              bottom: '10%'
          }
      };

      // 图表初始化
      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);
      myChart.setOption(option);

      // 窗口自适应
      window.addEventListener('resize', () => {
          myChart.resize();
      });
    </script>
  </body>
</html>
